<template>
  <div class="container">
    <!-- =========评论顶部导航栏 ========-->
    <div class="nav">
    <van-nav-bar
      title="评论"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    >
    <template #right v-if="uid">
      <van-image
          round
          width="2rem"
          height="2rem"
          :src=imgdd
          @click="$router.push('/myself')"
      />
    </template>
    <template #right v-else>
      <van-icon
          name="https://b.yzcdn.cn/vant/icon-demo-1126.png"
          size="25"
          dot
          @click="$router.push('/login')"
      />
    </template>
    </van-nav-bar>
    </div>
<!-- ================评论对象内容========== -->
    <div v-if="circledata">
      <div class="contain">
        <!-- 头像昵称 -->
         <div class="header" >
                <div class="in">
                    <div>
                        <van-image round width="5.5vh" height="5.5vh" :src="this.circledata[0].epic"/>         
                    </div>
                    <div class="nicheng">
                        <div class="n1">{{this.circledata[0].ename}}</div>
                        <div class="n2">1小时前</div>
                    </div> 
                </div>
                <div >
                    <van-icon name="star-o" size="3vh"/>
                </div>
            </div>
        <!-- 文字图片 -->
        <div class="main">
                <div class="con">{{this.circledata[0].info}}</div>
                <div class="pic" v-html="this.circledata[0].img">   
                </div>   
        </div>

      </div>
    </div>




    
    <!-- =========写评论框========= -->
    <div class="box">
        <van-field v-model="text" label="写评论"  left-icon="smile-o" right-icon="guide-o"  autosize @click-right-icon="addPJ"/>
        <!-- 未登录提示框 -->
        <van-notify v-model="show" type="success" color='#a81414' background='rgb(191 191 205)' >
             <van-icon name="bell" style="margin-right: 4px;" />
           <span v-show="uid==null">未登录，请先登录</span>
           <span v-show="uid!=null">评论不能为空呦，请填写内容</span>
        </van-notify>
    </div>
    <!--========= 整个评价内容========-->
    <h1 v-if="dataPJ2">暂无评价</h1>
    <div class="eval">
      <div v-for="(item, index) in dataPJ" :key="index">
        <!-- 评价头部 -->
        <div class="title">
          <div class="t1">
            <img :src="item.u_img" alt="" />
            <div class="name">
              {{ item.u_name }}
            </div>
          </div>
          <div class="t2">
            <!-- {{item.createtime}} -->
            {{tips[index]}}
          </div>
        </div>
        <!-- 评价的文字部分 -->
        <div class="t3">
            {{ item.content }}  
        </div>
      </div> 
    </div>
      
  </div>
</template>

<script>

export default {
  data() {
    //let day=new Date(),
    
    return {
      //imgdd: sessionStorage.getItem("upic"), //用户的头像
      imgdd:null,//存放页面显示头像
      //id: sessionStorage.getItem("id"), 
      uid:this.$store.state.id,//用户的ID
      dataPJ: [], //请求的所有评价数据
      dataPJ2:false,//没有评价时显示的
      text:'',//写评论的内容
      uname:'',//存放用户名
      img:'',//存放传入数据库用户头像
      tips:[],//存放updatePJ()函数遍历的时间数组
      tipss:[],//存放updatePJ()函数遍历的时间数组逆序
      createtime:[],//存放数据库内容
      time:'',//存放getLastDate函数的参数
      create:[],// 存放updatePJ()里接口请求的数据
      show: false,//存放提示框状态
      circledata:[],//存放动态接口数据
    };
  },

// created(){
//   this.updatePJ();
// },

  mounted() {
    this.getPJ(); //请求所有的评价
    this.userPJ();//
    this.getUnix();
    this.getTodayUnix();
    this.getYearUnix();
    //this.getFormatTime();
    this.updatePJ();
     this.circledData();
  },
  methods: {
    // 动态圈数据导入
    circledData(){           
        var url=`http://localhost:3333/circle/list?eid=${this.$route.query.eid}`
        console.log(this.$route.query.eid);        
        this.$axios.get(url).then(res=>{
            console.log(res);
            this.circledata=res.data.data
            //console.log(index);
            console.log(this.circledata[0].ename);
        })
    },
    // 修改评价时间函数
    updatePJ(){
      const url = `http://localhost:3333/content/list2?to_id=${this.$route.query.eid}`;
      this.$axios.get(url).then((res) => {
        this.create=res.data.result;
            // console.log( this.create)
            // console.log(this.create.length,this.create[0]);
       //  遍历hbb_message数据库中的内容
        for(var i=0;i<this.create.length;i++){
          //console.log(this.create.length,this.create[i],Number(this.create[i].createtime));

            // 变量timestamp存放数组中的createtime属性内容
            var timestamp=Number(this.create[i].createtime)
                 // console.log(timestamp,iid);

            var now=this.getUnix()//获取当前时间戳
            var today=this.getTodayUnix()//获取今日0时0分时间戳
            var timer =parseInt(((now-timestamp)/1000).toFixed(0))//获取时间戳之差并换成秒级时间戳
                  // console.log(now,today,timestamp,timer);
            var tip=''//定义变量tip
              if (timer <= 0) {
                 tip='刚刚'   
              }else if(Math.floor(timer/60) <= 0){
                 tip ='刚刚'              
              }else if(timer<3600){
                 tip = Math.floor(timer/60)+'分钟前'     
              }else if(timer>=3600&&(timestamp-today>=0)){
                 tip = Math.floor(timer/3600)+'小时前'      
              }else if(timer/86400<=31){
                 tip = Math.ceil(timer/86400)+'天前' 
                 //return tip 
              }else{
                 tip = this.getLastDate(timestamp)
              }  
              console.log(tip);
              this.tips.push(tip)//存放tip到数组tips
 
          } 
            console.log(this.tips);
             this.tipss=this.tips.reverse()//将数组逆序
           //console.log(this.tips.push(tip)) 
           //console.log(tip);   
          
      })
 
            
    },
    //请求评价数据
    getPJ() {
      const url = `http://localhost:3333/content/list2?to_id=${this.$route.query.eid}`;
      this.$axios.get(url).then((res) => {
        //console.log(res);
        this.dataPJ = res.data.result;
        this.createtime=res.data.result;
        //console.log(this.createtime, res.data.result);
        if(!this.dataPJ.length==0){
          this.dataPJ.reverse()
          this.dataPJ2=false
        }else{
          this.dataPJ2=true
        }
      });
    },
    next(){
      this.updatePJ().then(()=>{
        this.getPJ()
      })
    },
    //当前时间戳
    getUnix:function(){
      var date =new Date()
      return date.getTime()
    },
    //今天0时0分时间戳
    getTodayUnix:function(){
      var date=new Date()
      date.setHours(0)
      date.setMinutes(0)
      date.setSeconds(0)
      date.setMilliseconds(0)
      return date.getTime()
    },
    //今年1月1日0时0分时间戳
    getYearUnix:function(){
      var date=new Date()
      date.setMonth(0)
      date.setDate(1)
      date.setHours(0)
      date.setMinutes(0)
      date.setSeconds(0)
      date.setMilliseconds(0)
      return date.getTime()      
    },
    //获取标准年月日
    getLastDate:function(time){
      var date=new Date(time)
      var month=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1
      var day =date.getDate()<10?'0'+date.getDate():date.getDate()
      return date.getFullYear()+'-'+month+"-"+day
    },
    
 
    // 获取登录用户id后，请求他的头像信息

    userPJ(){
         let uid =this.uid
         let url1=`http://localhost:3333/me/${uid}`
         this.$axios.get(url1).then(res=>{
          //console.log(res.data.data);
          this.imgdd=res.data.data[0].upic
          this.uname=res.data.data[0].uname
          //console.log(this.imgdd,this.uname);
        })
    },
   
    // 添加评论
    addPJ(){
        if(this.uid==null) {
           this.show = true;
           setTimeout(() => {
           this.show = false;
          }, 2000);

        }else if(this.text==''){
          this.show = true;
           setTimeout(() => {
           this.show = false;
          }, 2000);
        }
        else{
         var now=this.getUnix()
         let uid =this.uid
         let content=this.text
        //  解决post请求图片地址含有特殊字符&提交图片链接地址，地址被截断
         let img=encodeURIComponent(this.imgdd)
         
        const url=`http://localhost:3333/content/add`
        let params=`u_id=${uid+4}&u_name=${this.uname}&content=${content}&u_img=${img}&createtime=${now}&to_id=${this.$route.query.eid}`
        console.log(this.imgdd);
        this.$axios.post(url,params).then(res=>{
           console.log(res);
         })
      

        //  点击发表评论后刷新
         history.go(0)
         }
    },
   
  },
};
</script>

<style scoped lang="scss">
*{
  //font-family: ;
}
/*======顶部导航======*/
.nav{ 
    position: fixed;
    width: 100%;
    left:0;
    top: 0px;
    z-index: 10; 
    ::v-deep .van-nav-bar__text{
      color: #323233;
    }
    ::v-deep .van-nav-bar__left{
      font-size: 4.3vw;
    }
    ::v-deep .van-nav-bar__title{
      font-size: 4.7vw;
    }
}
/*======评论框======*/
.box{
    //margin-left: 1vh;
    //margin: 8vh 1vh 0 1vh;
    height: 8vh;
    width: 93%;
    //margin-top:1vh;
    margin: 3vw;
    .van-cell{
     border: 1px solid rgb(201, 198, 198);
     border-radius: 9px;
     //line-height: 30px;
    }

   
}

/*======评论内容部份======*/
.eval {
  padding: 10px;
  margin: 1vw; 
}
.eval > div {
  border-bottom: 1px solid #dee1e6;
  margin-bottom: 10px;
}
// 头部布局:头像，昵称，时间 
.title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  height: 6vh;
  // 头像+昵称
  .t1{
    display: flex; 
    align-content: center;
    justify-content: center;
    img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .name{
      margin-top: 1.25vh;
    }
  }
  // 时间
  .t2{
    margin-top: 1.25vh;
    }
}
/*======评论文字部份======*/
::v-deep .eval > div > div[data-v-331cf118]:last-child{
    justify-content: flex-start;
    margin-left: 2vw;
    margin-bottom: 1vh;
  }
/*======暂无评价======*/
h1{
    position: absolute;
    bottom: 30%;
    left: 30%;

}

/* 删除评价按钮 */
.eval > div>div:last-child{
  display: flex;
  justify-content: flex-end;
}
.eval > div>div:last-child>button{
  border-radius: 5px;
  width: 60px;
  margin-right: 10px;
  margin-bottom: 5px;
}


::v-deep .van-field__label{
    width: 3em;
    //color: #a81414;
}
/*======烘焙圈内容======*/
.contain{
  margin: 3vw;
  margin-top: 11vh;
    .header{   
        height: 8vh;
        display: flex;
        align-content: center;
        justify-content: space-between;
        .in{
        display: flex;
        align-content: center;
        .nicheng{
        padding-left: 3vw;
          .n2{
              font-size: 1vh;
          }
        }
        
    }    
}
    .main{
        .con{
        margin-bottom: 1vh;
        }
        ::v-deep .van-grid-item__content{
        padding: 2px;
        }
        .pic {
        width: 94vw;
        //height: 30vh;
        display: flex;
        //justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        
        ::v-deep div{
            //border: 1px solid black;
            border-radius: 2px;
            width: 29.5vw;
            height: 12vh;
            margin-right: 1vw;
            margin-bottom: 0.7vh;
            overflow: hidden;
            img{
                width: 100%;
                
            }
        }
        }
}

}
</style>
